葫芦的运维日志_cssjshtml_vue.js 表单单选与单选互斥

浏览量 4525

2018/12/03 01:01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选互斥</title>
    <script src="/static/js/vue.min.js"></script>
</head>
<body>
<h1>单选</h1>
<div id="single">
    <input type="radio" :checked="picked">
    <label>单选按钮</label>
</div>
<h1>单选互斥</h1>
<div id="mutil">
    <input type="radio" v-model="picked" value="python" id="python">
    <label for="python">python</label>
    <br>

    <input type="radio" v-model="picked" value="java" id="java">
    <label for="java">java</label>
    <br>

    <input type="radio" v-model="picked" value="shell" id="shell">
    <label for="shell">shell</label>
    <br>
    <p>选择的是:{{ picked }}</p>
</div>
<script>
    var single = new Vue(
        {
            el: '#single',
            data: {
                picked: true
            }
        }
    );
    var mutil = new Vue(
        {
            el: '#mutil',
            data: {
                picked: 'java'
            }
        }
    )
</script>
</body>
</html>

葫芦的运维日志

打赏